import React, { Component } from 'react'
import qs from 'qs'
export default class Details extends Component {

    state = {
        datalist: [
            { id: 1, title: '西瓜1', price: 1.5, img: '/img/01.jpg' },
            { id: 2, title: '西瓜2', price: 1.6, img: '/img/02.jpg' },
            { id: 3, title: '西瓜3', price: 1.7, img: '/img/03.jpg' },
        ],
        item:{}//接收这条数据
    }
    //在初始生命周期中 根据id 去所有列表中找到这条数
    //dom挂载后的周期
    componentDidMount() {
        console.log(this.props.match.params);
        let { id } = this.props.match.params
        let obj = this.state.datalist.find(item => {
            return item.id == id
        })
        this.setState({ item: obj })
    }


    render() {
        /*    console.log(this.props); */
        /*let { item } = this.props.location.state */

        /*   console.log(qs.parse(this.props.location.search.slice(1)));
          let { id, title, price, img } = qs.parse(this.props.location.search.slice(1)) */

        /*   console.log(this.props);
          let { id, title } = this.props.match.params */

          let {item} = this.state
        return (
            <div>
                <h2>详情页</h2>
                <img src={item.img} width={100} />
                <p>{item.id}</p>
                <p>{item.title}</p>
                <p>{item.price}</p>
            </div>
        )
    }
}
